<template>
  <div class="video-upload-container">
    <div class="upload-card">
      <h2 class="upload-title">发布视频</h2>

      <div class="form-section">
        <div class="section-title">文字描述</div>
        <el-input
          type="textarea"
          v-model="companyVideoQuery.title"
          :maxlength="50"
          :rows="3"
          style="width: 50%"
          placeholder="简要描述一下招聘信息或企业形象（限50字）"
          show-word-limit
        />
      </div>

      <div class="form-section">
        <el-upload
          v-model="companyVideoQuery.file"
          class="upload-area"
          drag
          action="#"
          :limit="1"
          :before-upload="beforeUpload"
          :on-change="handleVideoChange"
          :on-success="handleVideoUploadSuccess"
          :on-remove="handleRemoveVideo"
          :on-error="handleError"
          :accept="'.mp4, .avi'"
          :auto-upload="false"
        >
          <div class="upload-content">
            <i class="el-icon-upload"></i>
            <div class="upload-text">
              将视频文件拖到此处，或<em>点击上传</em>
            </div>
          </div>
          <div class="upload-tip">
            <i class="el-icon-warning-outline"></i>
            视频文件大小不超过100M 上传后请点击"发布视频"
          </div>
        </el-upload>
      </div>

      <el-button
        type="primary"
        class="publish-button"
        :loading="uploading"
        @click="handlePublish"
      >
        发布视频
      </el-button>
    </div>

    <div class="footer">© 北仓区人才综合服务中心 技术支持 @广点</div>

 
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { addVideoApi } from "@/api/videoHire";
export default {
  name: "VideoUpload",
  data() {
    return {
      description: "",
      hashtag: "",
      videoFile: null,
      uploading: false,
      videoUrl: "",
      // 企业发布视频
      companyVideoQuery: {
        uid: "",
        title: "",
        file: "",
      },
    };
  },
  created() {
    this.companyVideoQuery.uid = this.userId;
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  methods: {
    // 限制文件大小和类型检查函数
    beforeUpload(file) {
      // 检查文件大小
      const isLt100M = file.size / 1024 / 1024 < 100;

      if (!isLt100M) {
        this.$message.error("视频大小不能超过 100MB!");
        return false; // 阻止上传
      }

      return true; // 允许上传
    },
    // 选择文件
    handleVideoChange(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.companyVideoQuery.file = file.raw;
      console.log(this.companyVideoQuery);
    },
    handleVideoUploadSuccess(response, file) {
      // 假设服务器返回的数据结构如下：
      // { success: true, data: { videoUrl: 'https://example.com/video.mp4' } }
      // const videoUrl = response.data.videoUrl;
      // 将视频URL保存到组件状态中，以便后续回显
      // this.videoUrl = videoUrl;
    },
    handleError() {
      this.$message.error("视频上传失败，请重试");
    },

    handleRemoveVideo(file, fileList) {
      // 清空回显的视频URL
      this.videoUrl = null;
    },
    // 发布视频
    async handlePublish() {
      try {
        const formData = new FormData();
        formData.append("uid", this.companyVideoQuery.uid);
        formData.append("title", this.companyVideoQuery.title);
        formData.append("file", this.companyVideoQuery.file);
        const res = await addVideoApi(formData);
        console.log(res);
        if (res.code === 1) {
          this.$message.success("发布成功!");
          // this.$router.push({
          //   name:'/publish_video'
          // });
          this.companyVideoQuery = {};
        } else {
          this.$message.error("发布失败");
        }
      } catch {
        this.$message.error("发布失败");
      }
    },
  },
};
</script>

<style scoped>
.video-upload-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.upload-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
  flex: 1;
}

.upload-title {
  font-size: 20px;
  font-weight: normal;
  color: #333;
  margin-bottom: 24px;
}

.form-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
}

.upload-area {
  width: 100%;
}

:deep(.el-upload-dragger) {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #e4e7ed;
}

.upload-content {
  text-align: center;
}

:deep(.el-icon-upload) {
  font-size: 48px;
  color: #909399;
  margin-bottom: 16px;
}

.upload-text {
  color: #606266;
  font-size: 14px;
}

.upload-text em {
  color: #409eff;
  font-style: normal;
  cursor: pointer;
}

.upload-tip {
  margin-top: 12px;
  padding: 8px 16px;
  background-color: #fdf6ec;
  border-radius: 4px;
  color: #e6a23c;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.publish-button {
  /* width: 100%;
  height: 44px;
  font-size: 16px;
  border-radius: 22px;
  background-color: #409EFF;
  border-color: #409EFF; */
  margin: 34px 18px 0 18px;
  height: 48px;
  width: 322px;
  font-size: 18px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 7px 0 #bddefe;
  border-radius: 50px;
  background-image: linear-gradient(90deg, #4fa5fa, #1a8afa);
}

.publish-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.footer {
  text-align: center;
  color: #909399;
  font-size: 14px;
  padding: 16px 0;
}

:deep(.el-textarea__inner) {
  resize: none;
}

:deep(.el-input__count) {
  background: transparent;
}
</style>
